<template>
    <view class="content">
		<view class="_label_top">
			<image class="_btn_top" src="../../static/img/kjg.png"></image>
			<label class="_lab_top">{{itext}}</label>
		</view>
		<view  class="_bg_middle">
			<view class="success-content">
				<image src="" mode=""></image>
				<label for="">支付成功</label>
			</view>
		</view>
		<cmd-bottom-nav @click="tapNav"  border-color="#BC1BBE" background-color="#BC1BBE" font-color="#fff" active-font-color="#fff"></cmd-bottom-nav>
    </view>
</template>

<script>
	import cmdBottomNav from "@/components/cmd-bottom-nav/cmd-bottom-nav.vue"
	import mbtn from "@/components/m-btn-type/m-btn.vue"
	import mtabbar from "@/components/m-tabbar/m-tabbar.vue"
	import mBtnCs from '@/components/m-btn/m-btn-cs.vue'
	import mPay from '@/components/m-pay/m-pay.vue'
	import comm from '../../common/helpers.js'
    export default {
		components:{mbtn,mtabbar,cmdBottomNav,mBtnCs,mPay},
		data(){
			return{
				itext:'订单完成',
				order:[],
				inumber:'',
				timer:'',
				payTime:'',
				oid:'',
				payStatu:true,
				//支付相关参数
				param:[],
				goods_title:'',
				discount:0.00,
				usercount:0
			}
		},
        onLoad(e) {
			// console.log(e.mid)
			//获取订单
			uni.request({
				url: comm.websiteUrl+'?s=v1/getorder/',
				method: 'POST',
				data: {
					// 'mid':e.mid,
					// 'order_no':e.order_no,
					'mid':'oIBL25Qkcode2VLSacX__5ck1OnQ',
					'order_no':'659553650007',
				},
				success: res => {
					if(res.data.code == 404){
						this.order = res.data.data
						uni.showModal({
							title:this.goods_title,
							content:res.data.msg
						})
					}
					if(res.data.code == 200){
						this.payStatu = res.data.data.pay_state==0?true:false
						this.goods_title = uni.getStorageSync('rule')
						this.order = res.data.data
						this.param = res.data.param
					}
				},
				fail: () => {},
				complete: () => {
					this.countDown()
				}
			});
			
			this.getcountuser()
        },
		methods:{
			tapNav(e){
				let that = this
				let path = e.item.pagePath
				uni.switchTab({
					url:path,
					success: (res) => {
					},
					complete: (com) => {
					}
				})
			},
			countDown(){
				var that = this
				//2016-12-27 12:47:08 转换日期格式
				var a = that.order.order_time.split(/[^0-9]/);
				//截止日期：日期转毫秒
				var expireMs = new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
				//倒计时毫秒
				var duringMs = expireMs.getTime() - (new Date()).getTime();
				// 渲染倒计时时钟
				that.inumber = that.date_format(duringMs)
				if (duringMs <= 0) {
					that.payStatu = false
					that.inumber = "支付已截止，请重新下单"
					console.log(that.inumber)
				  return;
				}
				setTimeout(function () {
				  // 放在最后--
				  duringMs -= 10;
				  that.countDown()
				}
				, 10)
			},
			/* 格式化倒计时 */
			date_format(micro_second) {
				var that = this
				// 秒数
				var second = Math.floor(micro_second / 1000);
				// 小时位
				var hr = Math.floor(second / 3600);
				// 分钟位
				var min = that.fill_zero_prefix(Math.floor((second - hr * 3600) / 60));
				// 秒位
				var sec = that.fill_zero_prefix(second % 60);// equal to => var sec = second % 60;
				return hr + ":" + min + ":" + sec + " ";
			},
			  /* 分秒位数补0 */
			fill_zero_prefix(num) {
				return num < 10 ? "0" + num : num
			},
			payOrder(){
				/* 
				* 进行订单结算，调用微信支付,支付前先进行签名 
				* 时间：2019年6月3日
				* penglei
				* */
				uni.requestPayment({
					provider:'provider',
					timeStamp:this.param.timeStamp,
					nonceStr:this.param.nonceStr,
					package:this.param.package,
					signType:'MD5',
					paySign:this.param.paySign,
					success:(res) => {
						if(res.errMsg == 'requestPayment:ok'){
							//成功后更改订单状态，获取通知回调
							uni.request({
								url: comm.websiteUrl+'?s=v1/wxpay/',
								method: 'GET',
								data: {},
								success: res => {
									console.log(res)
								},
								fail: () => {},
								complete: () => {}
							});
						}
						// console.log(res)
					},
					fail: (err) => {
						if(err.errMsg === 'requestPayment:fail cancel'){
							uni.showToast({
								image:'../../static/img/64.png',
								title: '你已经取消支付',
								duration:3000
							});
							
							uni.navigateBack({
								url:'main_card_res'
							})
						}
						// console.log(err)	
					}
				})
			},
			getcountuser:function(){
				let that = this
				uni.request({
					url: comm.websiteUrl+'?s=v1/getcountuser/',
					method: 'GET',
					data: {},
					success: res => {
						// console.log(res)
						that.usercount = res.data.data
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
    }
</script>

<style lang="scss">
	.content{
		padding: 0upx;
		
		
		._bg{
			width: 100%;
			height:91%;
			vertical-align: top;
			top: 0;
			right: 0;
			position:absolute;
			vertical-align: middle;
		}
		
		._label_top{
			display:flex;
			width:100%;
			top:25upx;
			height:auto;
			position:relative;
			justify-content:center;

			._btn_top{
				height:185upx;
				width: 50%;
			}
			
			._lab_top{
				z-index:3;
				color:white;
				width:30%;
				text-align:center;
				justify-content:center;
				align-items:center;
				position:absolute;
				display:flex;
				margin:auto;
				height:100%;
			}
		}
		
		._bg_middle{
			width:100%;
			height:100%;
			position:absolute;
			z-index:7;
			margin:auto;
			justify-content:center;
			vertical-align:middle;
			align-items:center;
			display:flex;
			
			
			.success-content{
				width: 600upx;
				height: 496upx;
				border-radius: 10upx;
				background:rgba(255,255,255,1);
				
				label{
					width:100%;
					display:flex;
					justify-content:center;
					z-index:5;
					margin-top:-164rpx;
				}
			}
		}
	}
</style>
